<template>
	<view>
		
		<view class="cover-view" @click="colseAll()"
			:style="domInfo[0] && domInfo[0].status ? '' : 'display:none' ">
		</view>
		<view class="gt-form-item">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view v-if="required" class="gt-form-required">*</view>
					<view class="gt-form-label">{{label}}</view>
					<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999"
						@click="showDesc()">
					</uni-icons>
				</view>
			</view>
			<view class="gt-form-body">
				<view class="gt-form-content">
					<!-- 左ICON & 左文字 -->
					<view v-slot="left">
						<view class="gt-form-content-left">
							<view class="gt-form-content-icon iconfont" :class="leftIcon"></view>
							<text class="gt-form-content-text"
								:class="leftIcon && leftText ? 'leftIconTextMargin' : ''">{{leftText}}</text>
						</view>
					</view>
					<view class="gt-drop-list col-auto" ref="dropList" id="dropList">
						<view class="row " @click="changeDomInfo()">
							<view v-if="type == 'search'" class="col-auto t-row-1 mr-10"
								:class=" name ? '' : 'c-secondary'">
								<input class="input pointer" style="padding: 0;width: 100%;" v-model="name"
									:placeholder="placeholder || '请选择'" :disabled="type == 'search' ? false  : true"
									@input="listenSearchInput" @blur="listenSearchInputOut" />
							</view>
							<view v-else class="col-auto t-row-1 mr-10" :class=" name ? '' : 'c-secondary'">
								{{ name || placeholder || '请选择' }}
							</view>
							<!-- <view class="iconfont icon-unfold"></view> -->
						</view>
						<view class="gt-drop-list-box"
							:class="domInfo[0] && domInfo[0].status && listArray[0].length >0 ? 'show' :'' ">
							<view class="triangle-up"></view>
							<view class="" style="display: flex;flex-flow: row nowrap;">
								<view class="drop-column" v-for="(items,index) in listArray" :key="index">
									<view class="drop-row"
										:style="domInfo[index] && domInfo[index].status && domInfo[index].select === rowIndex ? 'color:#409EFF':''"
										v-for="(row,rowIndex) in items" :key="rowIndex"
										@mousemove="domMove(index,rowIndex)" @click="selectRow(index,rowIndex)">
										<view class="drop-name">
											<text>{{row.val}}</text>
										</view>
										<view class="drop-right">
											<uni-icons type="right" v-if="parentKeyArr.indexOf(row.key) != -1"
												:color="domInfo[index] && domInfo[index].status && domInfo[index].select === rowIndex ? '#409EFF':''">
											</uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-slot="right">
						<view class="gt-form-content-right" v-if="rightIcon || rightText">
							<text class="gt-form-content-text"
								:class="rightIcon && rightText ? 'rightIconTextMargin' : ''">{{rightText}}</text>
							<view class="gt-form-content-icon iconfont" :class="rightIcon"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="error!== false" class="gt-form-error">{{error}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "gt-drop-list",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			url: {
				type: String,
				default: function() {
					return '';
				}
			},
			type: {
				type: String,
				default: function() {
					return '';
				}
			},
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			list: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			placeholderClass: {
				type: String,
				default: 'placeholderClass'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: 'icon-unfold'
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}

		},
		created() {
			console.log(this.value);
			if(this.value && this.url && this.searchList.length==0){
				let _this = this;
				if (this.value) {
					this.$get({
						url: this.url + '&'+ this.field +'='+this.value,
						afterFun(res) {
							if (res) {
								_this.searchList = res;
									for(let i in res){
										let row = res[i];
										if(row.key == _this.value){
											_this.name = row.val;
											console.log(_this.name)
										}
									}
							}
						}
					});
				}
			}
		},
		data() {
			return {
				name: '',
				domInfo: [],
				parentKeyArr: [],
				searchList:[],
			}
		},
		computed: {
			listArray() {
				if (this.type == 'search') {
					var arr = this.searchList;
				} else {
					var arr = [{
						key: '',
						val: this.placeholder
					}];
				}
				
				for (var i in this.list) {
					let row = this.list[i];
					if (typeof row == 'object' && row.key !== undefined && row.val !== undefined) {
						if (!row.parent_key) {
							arr.push(row);
						}
						if (row.key === this.value) {
							this.name = row.val;
						}
						if (row.parent_key && this.parentKeyArr.indexOf(row.parent_key) == -1) {
							this.parentKeyArr.push(row.parent_key);
						}
					} else {
						arr.push({
							key: i,
							val: row
						});
						if (i === this.value) {
							this.name = row;
						}
					}
				}
				return [arr];
			}
		},
		methods: {
				listenSearchInput(e) {
					let value = e.detail.value;
					if(!value){
						this.searchList = [];
						this.$emit('change', '');
						return false;
					}
					let _this = this;
					if (value) {
						this.$get({
							url: this.url + value,
							afterFun(res) {
								if (res) {
									_this.searchList = res;
								}
							}
						});
					}
				},
				listenSearchInputOut(e){
					// this.name = this.value;
				},
				changeDomInfo(index = 0, rowIndex = 0) {
					let domInfo = this.domInfo;
					let status = domInfo[index] && domInfo[index].status ? true : false;
					let obj = {
						status: !status,
						select: rowIndex
					}
					domInfo[index] = obj;
					this.domInfo = [];
					this.domInfo = domInfo;
				},
				selectRow(index, rowIndex) {
					let key = this.listArray[index][rowIndex].key;
					if (this.parentKeyArr.indexOf(key) != -1 && this.type == 'default') {
						return false;
					}
					if(String(key).replace(/(^\s*)|(\s*$)/g, "").length == 0){
						this.$emit('change', '');
					}else{
						this.$emit('change', key);
					}
					let val = this.listArray[index][rowIndex].val;
					this.name = val || '';
					this.searchList = [];
					this.colseAll();
				},
				colseAll() {
					let domInfo = this.domInfo;
					for (let i in domInfo) {
						domInfo[i].status = false;
					}
					this.domInfo = [];
					this.domInfo = domInfo;
				},
				domMove(index, rowIndex) {
					let key = this.listArray[index][rowIndex].key;
					if (this.parentKeyArr.indexOf(key) != -1) {
						let arr = [];
						for (var i in this.list) {
							let row = this.list[i];
							if (row.parent_key == key) {
								arr.push(row);
							}
						}
						this.listArray[index + 1] = arr;
						this.changeDomInfo(index + 1, null);
					}
					let domInfo = this.domInfo;
					domInfo[index].select = rowIndex;
					this.domInfo = [];
					this.domInfo = domInfo;
			
				}
			}
	}
</script>

<style>
	.cover-view {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}
	
	.gt-drop-list {
		position: relative;
		cursor: pointer;
	}
	
	.drop-list-positon {
		position: absolute;
		z-index: 9999;
	}
	
	.drop-list-content {
		padding: 5px 0;
		max-height: 300px;
		background-color: white;
		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .3);
		border-radius: 3px;
		height: 0;
	}
	
	.drop-list-row {
		padding: 0 15px 0 20px;
		line-height: 38px;
	}
	
	.drop-list-row-active {
		color: #409EFF;
	}
	
	.drop-list-row:hover {
		background-color: #f2faff;
	}
	
	.show-drop-list {
		height: auto;
	}
	
	.hide-drop-list {
		height: 0;
		overflow: hidden;
	}
	
	
	
	.triangle-left {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-right: 10px solid #ffffff;
		border-bottom: 5px solid transparent;
		position: absolute;
		left: -8px;
		top: 16px;
		z-index: 999;
		filter: drop-shadow(-1px 0px rgba(0, 0, 0, .2))
	}
	
	.triangle-up {
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #ffffff;
		position: absolute;
		left: 50px;
		top: -6px;
		z-index: 999;
		filter: drop-shadow(0px -1px rgba(0, 0, 0, .1))
	}
	
	.gt-drop-list-box {
		position: absolute;
		top: 48px;
		left: -1px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		box-sizing: border-box;
		border-radius: 3px;
		z-index: 9999;
		max-height: 0;
		overflow: hidden;
	}
	
	.show {
		max-height: 248px;
		/* overflow: visible !important; */
		animation: showList 0.3s;
	}
	
	
	@keyframes showList {
		from {
			max-height: 0;
			overflow: hidden;
		}
	
		to {
			max-height: 248px;
			/* overflow: visible !important; */
		}
	}
	
	.drop-column {
		padding: 10px 0;
		max-height: 248px;
		border-right: 1px solid #eeeeee;
		overflow-y: auto;
	}
	
	.drop-row {
		padding: 6px 20px;
		width: auto;
		display: flex;
		flex-flow: row nowrap;
		padding-right: 38px;
		position: relative;
	}
	
	.drop-row:hover {
		background-color: #f2faff;
	}
	
	.drop-name {
		max-width: 180px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.drop-right {
		position: absolute;
		right: 20px;
		top: 0;
		text-align: center;
	}
</style>
